<template>
  <el-dialog
    :title="title"
    v-if="visible"
    :visible="visible"
    :width="width"
    :top="top"
    @close="$emit('close', $event)"
    :modal-append-to-body="true"
    :append-to-body="true"
    @open="$emit('open', $event)"
    @opened="$emit('opened', $event)"
    append-to-body
    :close-on-click-modal="closeOnClickModal"
    :destroy-on-close="true"
    :class="['global-common-dialog', isFixedHeight ? 'is-fixed-height' : '']"
  >
    <slot name="title" slot="title"></slot>
    <div
      :class="[
        'global-common-dialog-inside',
        isTopDivided ? 'top-divided-line' : '',
        isBottomDivided ? 'bottom-divided-line' : '',
      ]"
      slot="default"
    >
      <slot name="default"></slot>
    </div>
    <slot name="footer" slot="footer"></slot>
  </el-dialog>
</template>

<script>
/*
    需要每次都重新渲染 所以加上 v-if
 */
export default {
  name: "index",
  props: {
    title: {
      type: String,
    },
    visible: {
      type: Boolean,
    },
    width: {
      type: String,
      default: "50%",
    },
    top: {
      type: String,
      default: "15vh",
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
    isTopDivided: {
      type: Boolean,
      default: true,
    },
    isBottomDivided: {
      type: Boolean,
      default: true,
    },
    isFixedHeight: {
      type: Boolean,
      default: false,
    }, //是否固定高度50%
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.global-common-dialog {
  .global-common-dialog-inside {
    width: 100%;
    height: calc(100% - 2px);
    overflow: hidden;
  }

  .top-divided-line {
    border-top: 1px solid #eee;
  }

  .bottom-divided-line {
    border-bottom: 1px solid #eee;
  }

  ::v-deep .el-dialog__header {
    padding: 12px 18px;
    position: relative;

    .el-dialog__title {
      font-size: 15px;
    }

    .el-dialog__headerbtn {
      top: calc(50% - 8px);
      height: 18px;
      line-height: 18px;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }

  ::v-deep .el-dialog__footer {
    padding: 12px 18px;
    position: relative;
  }
}

.is-fixed-height {
  ::v-deep .el-dialog {
    height: 50%;

    .el-dialog__body {
      height: calc(100% - 56px - 48px);
    }
  }
}
</style>
